<template>
  <div class="NewContactInformation">
    <div class="header">
      <div class="header-1">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>联系方式列表</span>
          </div>
          <div class="tuo-3">

            <el-button @click="dialogVisible = true" size="mini" style="
                width: 96px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              ">新增</el-button>
          </div>
        </div>
        <!-- 新增联系方式 -->
        <el-dialog title="会员信息查询-新增联系方式" :visible.sync="dialogVisible" :before-close="handleClose" width="40%">
          <el-form style="margin-left: 20px" size="mini" :inline="true" :data="addpassengers" :model="addpassengers"
            class="pop">

            <div class="pop-1-2">
              <div class="pop-9">联系类型</div>
              <el-select clearable v-model="way.contactInformationType" size="mini" placeholder="请选择"
                style="width: 200px">
                <el-option v-for="item in fangshi" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="pop-1-2">
              <div class="pop-9">联系方式</div>
              <el-input style="width: 200px" v-model="way.contactInformationName" size="mini"></el-input>
            </div>
            <div class="pop-1-2">
              <div class="pop-8">说明</div>
              <el-input :autosize="{ minRows: 12, maxRows: 12 }" style="width: 368px"
                v-model="way.contactInformationNameIllustrate"></el-input>
            </div>
            <div class="pop-3">
              <el-button @click="getbackInsertConnect" size="mini" style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;">确定
              </el-button>

            </div>

          </el-form>
        </el-dialog>
        <!-- 订单列表 -->
        <div class="table">
          <el-table border size="mini" ref="contact" :data="contact" :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }" :row-style="{ height: '40px' }" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column prop="contactInformationType" label="类型" width="120">
              <template slot-scope="scope">
                <template v-if="scope.row.contactInformationType=='e-mail'">电子邮箱</template>
                <template v-if="scope.row.contactInformationType=='phone'">电话</template>
              </template>
            </el-table-column>
            <el-table-column prop="contactInformationName" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="contactInformationNameIllustrate" label="说明"> </el-table-column>
            <el-table-column prop="name" label="操作" fixed="right" width="240">
              <template slot-scope="scope">
                <el-button style="background-color: #6090ec; color: #fff" size="mini" @click="btnModify(scope.row)">修改
                </el-button>
                <el-button size="mini" style="background-color: #f6b23e; color: #fff" @click="dialogVisible = true">操作记录
                </el-button>
                <el-button @click="Deletephone(scope.row)" style="background-color: #ff0000; color: #fff" size="mini">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 删除 -->
      <el-dialog title="确认删除该联系方式吗" :visible.sync="Deletep " :before-close="handleClose" width="50%">
        <div class="pop-3">
          <el-button @click="getbackDeleteConnect" size="mini" style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;">确定
          </el-button>

        </div>

      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="会员信息查询-修改联系方式" :visible.sync="Modify" :before-close="handleClose" width="50%">
        <div class="header-1">
          <div class="too-1-1">
            <div class="too"></div>
            <span>修改联系方式</span>
          </div>
        </div>

        <el-form style="margin-left: 20px" size="mini" :inline="true" :data="addpassengers" :model="addpassengers"
          class="pop">

          <div class="pop-1-2">
            <div class="pop-9">联系类型</div>
            <el-select clearable v-model="way.contactInformationType" size="mini" placeholder="请选择"
              style="width: 200px">
              <el-option v-for="item in fangshi" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="pop-1-2">
            <div class="pop-9">联系方式</div>
            <el-input style="width: 200px" v-model="way.contactInformationName" size="mini"></el-input>
          </div>
          <div class="pop-1-2">
            <div class="pop-8">说明</div>
            <el-input :autosize="{ minRows: 12, maxRows: 12 }" style="width: 368px"
              v-model="way.contactInformationNameIllustrate"></el-input>
          </div>
          <div class="pop-3">
            <el-button @click="getbackUpdateConnectById" size="mini" style="
                width: 110px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;">确定
            </el-button>

          </div>

        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: "NewContactInformation",
    // 父子传递参数
    props: ['MembershipInformationData'],
    data() {
      return {
        // 方式
        value: '',
        Edit: {},
        contactInformationId: 0,
        fangshi: [{
            value: 'phone',
            label: "手机"
          },
          {
            value: 'e-mail',
            label: "电子邮箱"
          }
        ],
        // 修改
        way: {
          contactInformationId: "",
          contactInformationType: "",
          contactInformationNameL: "",
          contactInformationNameIllustrate: ""
        },
        contact: [],
        dialogVisible: false,
        labelPosition: "right",
        formLabelAlign: {
          name: "",
          checked: true,
        },
        Modify: false,
        Deletep: false,
        radio: 3,
        checked: false,
        sizeForm: {
          name: "",
          region: "",
        },
      };
    },
    methods: {
      // 查询联系方式
      getbackConnect() {
        this.$axios.getbackConnect({})
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              // 工单列表数据
              this.contact = res.data;
              console.log(this.contact)
            }
          });
      },
      Deletephone(row) {
        this.Deletep = true
        this.contactInformationId = row.contactInformationId
        console.log(this.contactInformationId)
      },
      // 获取当前id
      btnModify(row) {
        this.Modify = true
        this.contactInformationId = row.contactInformationId
        console.log(this.contactInformationId)
      },
      // 修改联系方式
      getbackUpdateConnectById() {
        this.Modify = false
        this.$axios.getbackUpdateConnectById({
            contactInformationId: this.contactInformationId,
            contactInformationType: this.way.contactInformationType,
            contactInformationName: this.way.contactInformationName,
            contactInformationNameIllustrate: this.way.contactInformationNameIllustrate
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {}
          });
      },
      // 删除联系方式
      getbackDeleteConnect() {
        this.Deletep = false
        this.$axios.getbackDeleteConnect({
            contactInformationId: this.contactInformationId,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          });
      },
      // 新增联系方式
      getbackInsertConnect() {
        this.dialogVisible = false
        this.$axios.getbackInsertConnect({
            contactInformationType: this.way.contactInformationType,
            contactInformationName: this.way.contactInformationName,
            contactInformationNameIllustrate: this.way.contactInformationNameIllustrate,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.$message({
                message: '新增成功',
                type: 'success'
              });
            }
          });
      },
      onSubmit() {
        console.log("submit!");
      },
      handleChange(value) {
        console.log(value);
      },
    },
    mounted() {
      this.getbackConnect();
    },
  };
</script>
<style scoped>
  .NewContactInformation {
    height: 100vh;
    background-color: #f7f7f7;
  }

  .header-1-1 {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
  }

  .tou {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .tuo {
    font-weight: bolder;
    display: flex;
    margin-left: 20px;
    padding-top: 20px;
    justify-content: space-between;
    margin-right: 20px;
  }

  .tuo-1 {
    display: flex;
  }

  .tuo-2 {
    width: 3.5px;
    height: 17px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    font-size: 12px;
    margin-bottom: 25px;
  }

  .too-1-1 {
    display: flex;
    margin-left: 20px;
    font-size: 20px;
  }

  .too {
    width: 3.5px;
    height: 22px;
    background-color: #4b71bf;
    margin-top: 2px;
    margin-right: 4px;
    margin-bottom: 25px;
  }

  .table {
    margin-left: 20px;
    margin-right: 20px;
  }

  .top-6 {
    display: flex;
  }

  .tou-3 {
    display: flex;
  }


  #selectForm>>>.el-form-item__label {
    font-size: 11px;
  }

  .pop-9 {
    font-size: 11px;
    width: 60px;
    padding-top: 5px;
  }

  .pop-8 {
    font-size: 11px;
    width: 60px;
    padding-top: 10px;
  }

  .pop {
    margin-left: 20px;
  }

  .pop-1 {
    display: flex;
    width: 250px;
  }

  .pop-1-2 {
    display: flex;
    margin-bottom: 12px;
    margin-right: 10px;
  }

  .pop-2 {
    display: flex;
  }

  .pop-3 {
    margin-left: 10px;
    margin-top: 40px;
  }
</style>